<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<body>

</body>
</html>
<script>
    var canvas = document.createElement('canvas');
    document.body.style.margin = 0;
    document.body.style.overflow = 'hidden';
    document.body.style.backgroundColor = 'black';
    document.body.appendChild(canvas);
    var ctx = canvas.getContext('2d');

    canvas.width = innerWidth;
    canvas.height = innerHeight;

    window.addEventListener('resize', function() {
        canvas.width = innerWidth;
        canvas.height = innerHeight;
    });

    var gravity = 0.45;
    var friction = 0.99;
    var particlesPerBlast = 60;

    function Particle(x, y, h) {
        this.lifetime = 30 + Math.round(Math.random() * 30);
        this.gravityTime = 15;
        this.hue = h;
        this.alpha = 1;
        this.size = 1 + Math.round(Math.random());
        this.x = x;
        this.y = y;
        this.xSpeed = 5 + Math.random() * -10;
        this.ySpeed = 5 + Math.random() * -10;
    }

    Particle.prototype.tick = function(i) {
        if (this.lifetime > 0 && this.inbounds()) {
            this.move();
            this.render();
        } else {
            particles.splice(i, 1);
        }
        this.lifetime--;
    };

    Particle.prototype.inbounds = function() {
        if (this.x > innerWidth || this.x < 0 || this.y > innerHeight) {
            return false;
        }
        return true;
    };

    Particle.prototype.move = function() {
        this.x += this.xSpeed;
        this.y += this.ySpeed;
        this.xSpeed *= friction;
        this.gravityTime--;
        if (this.gravityTime < 0) {
            this.ySpeed += gravity;
        }
    };

    Particle.prototype.render = function() {
        ctx.shadowColor = 'hsl(' + this.hue + ',100%,95%)';
        ctx.shadowBlur = this.size * 3;
        ctx.fillStyle = 'hsl(' + this.hue + ',100%,85%)';
        ctx.fillRect(this.x, this.y, this.size, this.size);
    };

    function populate(arr, ex, ey, hue) {
        for (var i = 0; i < particlesPerBlast; i++) {
            arr.push(new Particle(ex, ey, hue));
        }
    }

    var particles = [];

    document.addEventListener('click', function(e) {
        e.preventDefault();
        populate(particles, e.clientX, e.clientY, Math.round(Math.random() * 360));
    })

    populate(particles, innerWidth / 4, innerHeight / 4, Math.round(Math.random() * 360));
    populate(particles, innerWidth * (3 / 4), innerHeight * (3 / 4), Math.round(Math.random() * 360));
    populate(particles, innerWidth / 2, innerHeight / 2, Math.round(Math.random() * 360));

    function animate() {
        ctx.clearRect(0, 0, innerWidth, innerHeight);
        for (var i = 0; i < particles.length; i++) {
            particles[i].tick(i);
        }
        window.requestAnimationFrame(animate);
    }

    animate();
</script>